<template>
  <ul class="prolist">
    <li class="proItem" @click="goDetail(item.id)" v-for="item of prolist" :key = "item.id">
      <div class="proImg">
        <img v-lazy="item.images.small" alt="">
      </div>
      <div class="proInfo">
        {{ item.title }}
      </div>
    </li>
  </ul>
</template>

<script>
import Vue from 'vue'
import { Lazyload } from 'mint-ui'
Vue.use(Lazyload)
export default {
  props: ['prolist'],
  methods: {
    goDetail (id) {
      this.$router.push({
        name: 'detail',
        params: { id }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';

.prolist {
  @include rect(100%, auto);

  .proItem {
    @include rect(100%, 1rem);
    @include flexbox();
    @include border(0 0 1px 0, #ccc, solid);
    .proImg {
       @include rect(1rem, 1rem);
      img {
        @include rect(0.9rem, 0.9rem);
        @include margin(0.05rem 0.05rem 0.05rem 0.05rem);
      }
    }
    .proInfo {
      @include flex();
    }
  }
}
</style>
